<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style>
		.active {
			width: 100px;
			height: 100px;
			background: green;
		}
		.text-danger {
			background: red;
		}
		.base {
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<!-- 
		class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
		v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组
		实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
	-->
	<div id="app">
		<div v-bind:class="{ active: isActive }"></div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				isActive: true
			}
		});
	</script>
	<h1>****************</h1>
	<!-- 
		我们也可以在对象中传入更多属性用来动态切换多个 class 
		text-danger 类背景颜色覆盖了 active 类的背景色：
	 -->
	<div id="app2">
		<div class="static"
			v-bind:class="{ active: isActive, 'text-danger': hasError }">
		</div>
	</div>
	<script type="text/javascript">
		var app2 = new Vue({
			el: '#app2',
			data: {
				isActive: true,
				hasError: true
			}
		});
	</script>
	<h1>****************</h1>
	<!-- 
		我们也可以直接绑定数据里的一个对象：
		text-danger 类背景颜色覆盖了 active 类的背景色：
		此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
	 -->
	<div id="app3">
		<div v-bind:class="classObject"></div>
	</div>
	<script type="text/javascript">
		var app3 = new Vue({
			el: '#app3',
			data: {
				isActive: true,
				error: {
					value: true,
					type: 'fatal'
				}
			},
			computed: {
				classObject: function(){
					return {
						base: true,
						active: this.isActive && !this.error.value,
						'text-danger': this.error.value && this.error.type == 'fatal',
					}
				}
			}
		});
	</script>
	<h1>****************</h1>
	<!-- 
		Vue.js style(内联样式)
		我们可以在 v-bind:style 直接设置样式：
	 -->
	<div id="app4">
		<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
	</div>
	<script type="text/javascript">
		var app4 = new Vue({
			el: '#app4',
			data: {
				activeColor: 'red',
				fontSize: 30
			}
		});
	</script>
</body>
</html>
